iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

30天搞定CSS及切版系列 第 1

CSS-Model 盒模型

  • 分享至 

  • xImage
  •  

前言

在HTML中每一個元素都會被CSS當作一個矩形盒子,CSS可以更改其寬度、高度、跟其他元素的距離等等的屬性。而每一個矩形盒子都會由四個部分 content padding border margin 組成。


圖例

我畫的

https://ithelp.ithome.com.tw/upload/images/20210911/201234916CwkA5gb8P.png

在瀏覽器中可觸碰元素點擊右鍵「檢查」查看該元素的Box-Model


Content

真正容納內容物的空間。
在裡面可以放置文字、圖片、元素或任何你想放的東西。

<div>
    我是一段文字
    <img src="/jpg.jpg" alt="">
    <a></a>
    <nav></nav>
</div>

Padding

設定盒子與內容物(Content)之間的距離。又稱為內距。

首先我們先來做一個沒有設定Padding的元素。可以看到元素的邊框緊緊的貼著Content

但在我們為元素設定padding後,可以看到邊框和Content離的很遠~

padding:30px;

再來查看瀏覽器中的Box Model,上下左右都有了30px的padding

觸碰padding▼ 畫面中的元素也會跟著顯示綠色Padding的範圍


Border

邊框。
元素可視最外圍的那一層。

這是沒有邊框元素~

在我們加了黑色的邊框之後呢

border:3px solid black;

Margin

Box Model中的最外層,俗稱外距。
設定外距會讓元素更接近、遠離(可設定負值、正值)其他元素

下圖可愛的角落生物碰到了病毒,我們要幫助他維持防疫距離。

設定 Margin

margin-left:150px;

成功逃離病毒(//●⁰౪⁰●)//


下一篇
display : Inline、Block、Inline-Block
系列文
30天搞定CSS及切版16
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言